<template>
  <div class="full-width">
    <div id="header"
      :style="{'background-image': 'url(' + state.detail.coverImg + ')','background-repeat':'no-repeat','background-size':'cover'}"
      class="spy-15 min-width-130"
    >
      <div class="width-130 mx-auto">
        <p class="text-orange text-80">{{state.detail.name}}</p>
        <p class="text-orange text-80">.</p>
        <p class="text-gray text-24">Kupo Technology</p>
      </div>
    </div>
    <div v-html="state.detail.rockTextDesc" class="flex-column sp_m mx-auto width-130 px-16 py-38 bg-gray-light3 rounded-15">
    </div>
    <div class="width-130 flex_between_center flex-wrap mx-auto my-40">
      <div @click="handleJump(item.id)" class="news-item bg-gray-light3 width-60 position-relative rounded-15 mb-10" v-for="(item, index) in state.detail.details" :key="index">
        <div class="bvertical-line"></div>
        <img class="w-100" :src="item.picture" alt="pic">
        <div class="px-5 pt-12 pb-4 flex-column">
          <span class="text-22 text-black-light2 my-2">{{item.title}}</span>
          <div v-html="item.desc" class="content"></div>
          <div class="border border-bottom">
            <li class="border border-top line-height-40 cursor-pointer" v-for="(i, index) in item.labels" :key="index">{{i}}</li>
          </div>
          <moreBtn :title="userStore.state.lang === 'zh_CN'? '更多' : 'more'" />
        </div>
      </div>
    </div>
    <ContactUs/>
    <CommonFooter/>
  </div>
</template>

<script setup>
import CommonFooter from '@/components/CommonFooter.vue'
import ContactUs from '@/components/contactUs.vue'
import moreBtn from '@/components/moreBtn.vue'
import { onMounted, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import userStore from '@/store/index'
import urls from '@/api/index'

const router = useRouter()

const state = reactive({
  detail: {}
})
const handleJump = (id) => {
  const list = [{ path: '/introduce', name: '关于库珀', query: { id: '62d6bf34e1d8375b113f70a3' } }, { path: '/business', name: '业务范畴', query: { id: '62d6bf52e1d8375b113f70a4' } }]
  switch (id) {
    case '62cbe7346887a7e14773ab31':
      router.push({
        path: '/kuxinyun'
      })
      userStore.commit('ADDBREADCRUMB', [...list, { path: '/kuxinyun', name: 'message.KUXINYUN' }])
      break
    case '62cbe7346887a7e14773ab32':
      router.push({
        path: '/kuzhengtong'
      })
      userStore.commit('ADDBREADCRUMB', [...list, { path: '/kuzhengtong', name: 'message.KUZHENGTONG' }])
      break
    case '62cbe7346887a7e14773ab33':
      router.push({
        path: '/huxinyi'
      })
      userStore.commit('ADDBREADCRUMB', [...list, { path: '/huxinyi', name: 'message.HUXINYI' }])
      break
    case '62cbe7346887a7e14773ab34':
      router.push({
        path: '/kudatax'
      })
      userStore.commit('ADDBREADCRUMB', [...list, { path: '/kudatax', name: 'message.KUDATAX' }])
      break
    default:
      break
  }
}
watch(() => userStore.state.lang, () => {
  getDetail()
})
const getDetail = () => {
  userStore.commit('CHANGELOAD', true)
  const params = {
    id: '62d6bf52e1d8375b113f70a4',
    lang: userStore.state.lang
  }
  urls.home.getModuleData(params)
    .then(res => {
      state.detail = res.data
      userStore.commit('CHANGELOAD', false)
    })
    .catch(err => {
      userStore.commit('CHANGELOAD', false)
      ElMessage.error(err.msg)
    })
}
onMounted(() => {
  getDetail()
  const header = document.getElementById('header')
  header.scrollIntoView()
})
</script>

<style lang="scss">
.bg_img {
  background: url("@/assets/images/business.jpg") no-repeat;
  background-size: cover;
}
.sp_m{
  margin-top: -120px;
  p{
    font-size: 18px
  }
}
.out:hover img{
  transform: scale(1.1);
}
.out img{
  transition: all .5s ease;
  object-fit: cover;
}

.content{
  width:100%;
  height: 45px;
  margin-bottom: 32px;
  font-size: 14px;
  color: #555;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  word-break:break-all;
}
.bvertical-line {
  width: 2px;
  height: 100px;
  background: #ff5a2d;
  position: absolute;
  top: 305px;
  left: 40px;
  z-index: 888;
}
.news-item:hover{
  color: #fff !important;
  background: #222!important;
  img{
    filter: blur(5px);
  }
  span{
    color: #fff !important;
  }
}
</style>
